<template>
  <el-container ref="bigModel" class="main-model">
    <!-- 设备抗社会属性分析-评估页面 -->
    <el-header>
      <Header :active-title="4" />
    </el-header>
    <el-main>
      <div>
        <div class="home-model">
          <el-row>
            <el-col :span="leftModelSpan" style="background-color: #113367">
              <div class="home-model-left">
                <div style="height: 50%; border-bottom: 3px solid black">
                  <!-- <indexTree /> -->
                   <!-- <el-image :src="require('./img/hou.png')" v-if="!showgraph" style="width: 100%;height: 100%;"></el-image> -->
                    <div style="width: 100%;height: 100%;" v-if="!showgraph">
                      <!-- iframe -->
                      <iframe src="https://www.ustc.edu.cn/" style="width: 100%;height: 100%;"></iframe>
                    </div>
                   <div v-else>
                    <Graph
                    v-show="showgraph"
                    v-if="graphDataAfter"
                    :lineDash="[0, 0]"
                    :graphData="graphDataAfter"
                    :title="'抗归属后'"
                  />
                   </div>

                </div>
                <div style="height: 50%">
                  <!-- <indexTree /> -->
                  <!-- <el-image  :src="require('./img/qian.png')" v-if="!showgraph" style="width: 100%;height: 100%;"></el-image> -->
                  <div style="width: 100%;height: 100%;" v-if="!showgraph">
                    <!-- iframe -->
                    <iframe src="https://www.baidu.com" style="width: 100%;height: 100%;"></iframe>
                  </div>

                  <div v-else>
                    <Graph
                    v-show="showgraph"
                    v-if="graphDataBefore"
                    :lineDash="[0, 0]"
                    :graphData="graphDataBefore"
                    :title="'抗归属前'"
                  />
                  </div>

                </div>
                <img
                  v-if="rightModelShow"
                  :src="require('@/assets/xd/new/Group 1142813242.png')"
                  alt=""
                  class="rightJ"
                  @click="hideRightModel"
                />
                <img
                  v-else
                  :src="require('@/assets/xd/new/Group 1142813263.png')"
                  alt=""
                  class="rightJ"
                  style=""
                  @click="showRightModel"
                />
              </div>
            </el-col>
            <el-col :span="rightModelSpan">
              <div class="home-model-right">
                <div class="infoModel">
                  <div class="infoTitle flex-container">
                    归属组织泄露风险统计
                    <!-- 跳转终端页面 -->
                    <el-button
                      type="text"
                      @click="todataStatistics"
                      class="more"
                    >
                      更多
                    </el-button>
                  </div>
                  <div
                    class="infoContent"
                    :style="{ height: infoHeight + 'px' }"
                  >
                    <piechart />
                  </div>
                </div>
                <div class="infoModel">
                  <div class="infoTitle flex-container">
                    归属组织泄露风险告警
                    <!-- 跳转终端页面 -->
                    <el-button
                      type="text"
                      @click="todataStatistics"
                      class="more"
                    >
                      更多
                    </el-button>
                  </div>
                  <div
                    class="infoContent"
                    :style="{ height: infoHeight + 'px' }"
                  >
                    <list-scroll class="box" :speed="0">
                      <div class="list">
                        <div
                          class="infoItem1"
                          v-for="(item, index) in infoList"
                          :key="index"
                          @click="clickinfoList(item)"
                        >
                          <div class="_num">
                            {{ index + 1 }}
                          </div>
                          <div class="_cont">
                            {{ item.address }} 归属于 -- {{ item.org.name }}
                          </div>
                        </div>
                      </div>
                    </list-scroll>
                  </div>
                </div>
                <div class="infoModel">
                  <div class="infoTitle flex-container">
                    归属组织保护任务列表
                    <!-- 跳转终端页面 -->
                    <el-button
                      type="text"
                      @click="toTaskManagement"
                      class="more"
                    >
                      更多
                    </el-button>
                  </div>
                  <div
                    class="infoContent"
                    :style="{ height: infoHeight + 'px' }"
                  >
                    <list-scroll class="box" :speed="0">
                      <div class="list">
                        <div
                          class="infoItem2"
                          v-for="(item, index) in infoList2"
                          :key="index"
                          @click="clickinfoList2(item)"
                        >
                          <div class="_num">
                            {{ index + 1 }}
                          </div>
                          <div class="_cont">
                            {{ item.targetIp }}抗归属任务状态 --
                            <span v-for="dict in dict.type.atlas_task_status">
                              <span v-if="item.taskStatus == dict.value">
                                {{ dict.label }}
                              </span>
                            </span>
                          </div>
                        </div>
                      </div>
                    </list-scroll>
                  </div>
                </div>
              </div>
            </el-col>
          </el-row>
        </div>
      </div>
    </el-main>
  </el-container>
</template>

<script>
// 弹窗为dialog4， 3.5.6
// import Header from "@/views/xd/components/Header";
import Header from "@/views/largeScreen/components/header/index.vue";
// import indexTree from "@/views/xd/demo/indexTree.vue";
import indexTree from "@/views/xd/components/charts/new/equipmentRelationship.vue";
import ListScroll from "@/components/DtSrcollCopy2";
import piechart from "@/views/xd/components/charts/new/huanxing2.vue";
import * as echarts from "echarts";
import { selectCombatAtlasTaskById } from "@/api/IPOwnershipProtection/dataStatistics.js";
import Graph from "./graph.vue";
import {
  selectCombatAtlasTaskList,
  deleteCombatAtlasTaskById,
  addCombatAtlasTask,
  stopCombatAtlasTask,
  riskPageQuery,
} from "@/api/IPOwnershipProtection/dataStatistics.js";
// const toPath = (e) => {
//   console.log(e)
//   router.push({path:'/'+e,query:{id:'1'}});
// };
export default {
  components: { Header, indexTree, ListScroll, piechart, Graph },
  dicts: ["atlas_task_status"],
  data() {
    return {
      showgraph: true,
      rightModelShow: true,
      rightModelSpan: 5,
      leftModelSpan: 19,
      activeIndex: "1",
      activeIndex2: "1",
      formInline: {
        user: "",
        region: "",
      },
      infoList: [],
      infoList2: [],

      infoHeight: 300,
      // 饼形
      scrollTop: 0,
      graphDataBefore: {
        nodes: [],
        edges: [],
      },
      graphDataAfter: {
        nodes: [],
        edges: [],
      },
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
    };
  },
  mounted() {
    this.infoHeight = (this.$refs.bigModel.$el.offsetHeight - 80) / 3;
    let that = this;
    var id = this.$route.query.id;
    this.getGraphDataById(id);
    riskPageQuery(this.queryParams).then((res) => {
      this.infoList = res.data.content;
    });
    selectCombatAtlasTaskList(this.queryParams).then((res) => {
      this.infoList2 = res.data.content;
    });
  },
  methods: {
    clickinfoList(item) {
      let id = item.id;
      this.$router.push("/deviceHomeScreen");
    },
    clickinfoList2(item) {
      let id = item.id;
      this.getGraphDataById(id);
    },
    getGraphDataById(id) {
      selectCombatAtlasTaskById(id).then((res) => {
        console.log("抗归属前", res);
        debugger;
        if (res.data.taskMethod == "2") {
          this.showgraph = true;

          this.getGraphDatas(
            res.data.beforeRiskIpRelation,
            this.graphDataBefore
          );
          this.getGraphDatas(
            res.data.afterRiskOrgRelation,
            this.graphDataAfter
          );
        }
        if (res.data.taskMethod == "1") {
          this.showgraph = false;
          this.getGraphDatas({}, {
            nodes: [],
            edges: [],
          });
          this.getGraphDatas({}, {
            nodes: [],
            edges: [],
          });
        }
      });
    },
    getGraphDatas(beforeRiskIpRelation, graphDataBefore) {
      let nodes = [];
      let edges = [];
      [beforeRiskIpRelation].map((ele) => {
        nodes.push({
          id: String(ele.address),
          label: ele.address,
          params: {
            ip: ele.address,
            type: "",
            flag: true,
            city: ele.city,
            domain: ele.domain,
            org: ele.org,
            ipc: ele.ipc,
          },
        });
        if (ele?.city?.name) {
          nodes.push({
            id: String(ele?.city?.name),
            label: ele?.city?.name,
            params: { ip: ele.address, type: "city" },
          });
        }
        if (ele?.domain?.name) {
          nodes.push({
            id: String(ele?.domain?.name),
            label: ele?.domain?.name,
            params: { ip: ele.address, type: "domain" },
          });
        }
        if (ele?.org?.name) {
          nodes.push({
            id: String(ele?.org?.name),
            label: ele?.org?.name,
            params: { ip: ele.address, type: "org" },
          });
        }
        if (ele.ipc) {
          ele.ipc.map((aa) => {
            if (aa?.name) {
              nodes.push({
                id: String(aa.name),
                label: aa.name,
                params: { ip: ele.address, type: "ipc" },
              });
            }
          });
        }
        if (ele.city?.name) {
          edges.push({
            source: String(ele.address),
            target: String(ele.city?.id),
            label: "城市",
          });
        }
        if (ele.domain?.name) {
          edges.push({
            source: String(ele.address),
            target: String(ele.domain?.name),
            label: "域名",
          });
        }
        if (ele.org?.name) {
          edges.push({
            source: String(ele.address),
            target: String(ele.org?.name),
            label: "组织",
          });
        }
        if (ele.ipc) {
          ele.ipc.map((ee) => {
            if (ee?.name) {
              edges.push({
                source: String(ele.address),
                target: String(ee.name),
                label: "网段",
              });
            }
          });
        }
      });
      const nodesIds = new Set();
      graphDataBefore.nodes = nodes.filter((item) => {
        if (nodesIds.has(item.id)) {
          return false;
        }
        nodesIds.add(item.id);
        return true;
      });
      graphDataBefore.edges = edges;
    },
    showantiAttributive() {
      this.$router.push("/networkEquipment/antiAttributive");
    },

    hideRightModel() {
      this.rightModelShow = false;
      this.rightModelSpan = 0;
      this.leftModelSpan = 24;
    },
    showRightModel() {
      this.rightModelShow = true;
      this.rightModelSpan = 5;
      this.leftModelSpan = 19;
    },
    todataStatistics() {
      this.$router.push("/IPOwnershipProtection/TaskManagement");
    },
    toTaskManagement() {
      this.$router.push("/IPOwnershipProtection/dataStatistics");
    },

    onSubmit() {},
  },
};
</script>
<style lang="scss" scoped>
.home-model-left {
  height: calc(100vh - 70px);
}

.home-model-right {
  border-radius: 5px;
  padding: 5px;

  .infoContent {
    padding-top: 48px;
    box-sizing: border-box;
    overflow: hidden;
  }

  .infoModel {
    position: relative;

    .infoTitle {
      position: absolute;
      top: 0;
      left: 0;
      z-index: 5;
      width: 100%;
      background-image: url(~@/assets/xd/new/title.png);
      background-size: 100% 80%;
      background-repeat: no-repeat;
      color: #fff;
    }

    .infoBody {
      height: 100%;
      padding-top: 48px;
      box-sizing: border-box;
    }
  }
}

.flex-container {
  display: flex;
  justify-content: space-between;
}

.infoItem {
  line-height: 1.3em !important;
  font-size: 21px;
}

.rightJ {
  z-index: 1000;
}

.el-header {
  padding: 0;
  z-index: 5;
}

.more {
  color: #fff;
  font-size: 22px;
  font-weight: bold;
}

// .home-model-search{
//   z-index: 5;
// }
</style>
